{% extends "../base.html" %}

{% block title %} {% end %}

{% block body %}
<div class="layui-body">
    <!-- 内容主体区域 -->
    <div class="layui-btn-group topToolbar">
        <a class="layui-btn layui-btn-primary" data-type="add">
            <i class="layui-icon">&#xe608;</i>添加
        </a>
        <a data-href="{:url('status?table=admin_user&val=1')}" class="layui-btn layui-btn-primary">
            <i class="layui-icon">&#xe643;</i>启用
        </a>
        <a data-href="{:url('status?table=admin_user&val=0')}" class="layui-btn layui-btn-primary">
            <i class="layui-icon">&#xe63f;</i>禁用
        </a>
        <a data-href="{:url('delUser')}" class="layui-btn layui-btn-primary">
            <i class="layui-icon">&#xe640;</i>删除
        </a>
    </div>
    <table class="layui-table" lay-data="{height: 'full-88', cellMinWidth: 80, page: true, id:'user_list_table', limit:20, url:'/admin/user/list'}" lay-filter="user_list">
        <thead>
            <tr>
                <th lay-data="{type:'checkbox', fixed: 'left'}"></th>
                <th lay-data="{field:'id', width:120, fixed: true}">id</th>
                <th lay-data="{field:'username', width:120, sort: true}">用户名</th>
                <th lay-data="{field:'mobile', width:120, sort: true}">电话</th>
                <th lay-data="{field:'email', width:160, sort: true}">Email</th>
                <th lay-data="{field:'login_count', width:60, sort: true}">登录次数</th>
                <th lay-data="{field:'utc_last_login_at', width:180, sort: true}">最后登录</th>
                <th lay-data="{field:'status', title:'状态', width:80, templet: '#switchStatus', unresize: true}">状态</th>
                <th lay-data="{field:'utc_created_at', width:180, sort: true, fixed: 'right'}">添加时间</th>
                <th lay-data="{fixed: 'right', width:178, align:'center', toolbar: '#user_list_bar'}"></th>
            </tr>
        </thead>
    </table>

</div>
{% end %}

{% block javascript %}
<script type="text/html" id="user_list_bar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail" title="查看">
        <i class="layui-icon">&#xe705;</i>
    </a>
    <a class="layui-btn layui-btn-xs" lay-event="edit" title="编辑">
        <i class="layui-icon">&#xe642;</i>
    </a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" title="删除">
        <i class="layui-icon">&#xe640;</i>
    </a>
</script>

<script type="text/html" id="switchStatus">
    <input type="checkbox" name="status" value="{{!d.status}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="status" {{!d.status == 1 ? 'checked' : ''}}>
</script>

<script type="text/javascript">
var edit_curent_obj = false

var edit_success = function(data) {
    if (edit_curent_obj) {
        edit_curent_obj.update({
            username: data.username,
            email: data.email,
            mobile: data.mobile,
            status: data.status,
        })
        if (status_html[data.status]) {
            var td = edit_curent_obj.tr.children('td[data-field="status"]')
            td.html(status_html[data.status])
        }
    } else {
        window.location.reload()
    }
}

layui.use(['table','form'], function() {
    var table = layui.table
    var form = layui.form

    //监听表格复选框选择
    table.on('checkbox(user_list)', function(obj){
        console.log(obj)
    });
    //监听工具条
    table.on('tool(user_list)', function(obj){
        var data = obj.data;
        switch(obj.event) {
            case 'edit':
                edit_curent_obj = obj
                edit(data)
                break;
            case 'del':
                layer.confirm('删除之后无法恢复，您确定要删除吗？', function(index) {
                    del(data.id, obj, index)
                });
                break;
        }
    });

    var $ = layui.$, active = {
        add: function() {
            layer.open({
                type: 2,
                title: ['添加用户', 'background-color: #00bb9d;text-align:center;font-size:18px;color:#fff;'],
                shadeClose: true,
                shade: false,
                maxmin: false,
                area: ['50em', '40em'],
                content: '/admin/user/add',
            })
        },
        getCheckData: function(){ //获取选中数据
            var checkStatus = table.checkStatus('user_list_table')
            ,data = checkStatus.data;
            layer.alert(JSON.stringify(data));
        }
        ,getCheckLength: function(){ //获取选中数目
            var checkStatus = table.checkStatus('user_list_table')
            ,data = checkStatus.data;
            layer.msg('选中了：'+ data.length + ' 个');
        }
        ,isAll: function(){ //验证是否全选
            var checkStatus = table.checkStatus('user_list_table');
            layer.msg(checkStatus.isAll ? '全选': '未全选')
        }
    };

    $('.topToolbar .layui-btn').on('click', function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });

    // 编辑
    var edit = function(data) {
        layer.open({
            type: 2,
            title: ['编辑用户', 'background-color: #00bb9d;text-align:center;font-size:18px;color:#fff;'],
            shadeClose: true,
            shade: false,
            maxmin: false,
            area: ['50em', '40em'],
            content: '/admin/user/edit?id=' + data.id,
        })
    }

    // 删除
    var del = function(id, obj, index) {
        var next = '/admin/user/delete'
        $.ajax({
            type: 'DELETE',
            url: next,
            data: {id: id, _xsrf: get_xsrf()},
            dataType: 'json',
            success: function(data) {
                obj.del();
                layer.close(index);
                if (data.code==0) {
                    layer.msg('{{ _('操作成功') }}')
                } else if(data.msg) {
                    layer.msg(data.msg)
                } else {
                    layer.msg('{{ _('未知错误') }}')
                }
                setTimeout(function(){
                    window.parent.layer.closeAll()
                }, 2000)
            },
            error: function(xhr){
                // console.log(xhr.responseJSON)
                if (xhr.responseJSON && xhr.responseJSON.msg) {
                    layer.msg(xhr.responseJSON.msg)
                } else {
                    layer.msg('{{ _('未知错误') }}')
                }
            }
        })
    }

    form.on('switch(status)', function() {
        var status = this.checked ? 1 : 0
        var id = $(this).parent().parent().parent().children('td[data-field="id"]').children('div').html()

        var params = {id: id, status:status, }
        params['_xsrf'] = get_xsrf()

        $.ajax({
            type: "POST",
            url: '/admin/user/edit',
            data: params,
            success: function(res) {
                if (res.code==0) {
                    console.log('success')
                } else if(res.msg) {
                    layer.msg(res.msg)
                } else {
                    layer.msg('{{ _('未知错误') }}')
                }
            },
            error: function(xhr){
                // console.log(xhr.responseJSON)
                if (xhr.responseJSON && xhr.responseJSON.msg) {
                    layer.msg(xhr.responseJSON.msg)
                } else {
                    layer.msg('{{ _('未知错误') }}')
                }
            }
        })
    })
});

</script>
{% end %}